<template>
  <!-- ListView 人员列表 -->
  <div>
    <el-container>
      <!-- 表头的布局 -->
      <el-header
        >人员搜索:
        <el-input v-model="inputww" placeholder="请输入内容"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="sousuo"
          >搜索</el-button
        >
      </el-header>
      <!-- 底部表单的布局 -->
      <el-main>
        <div class="ry-butt">
          <!-- 按钮 -->
          <div class="ry-onm">
            <el-button
              class="item"
              type="primary"
              icon="el-icon-circle-plus-outline"
              @click="addFnm"
              >新建</el-button
            >
          </div>
          <!-- 表单 -->
          <div class="ry-form">
            <!-- 表单渲染 -->
            <el-table
              class="yan"
              :data="getlist.currentPageRecords"
              stripe
              :header-cell-style="{ backgroundColor: '#f3f6fb' }"
              style="width: 100%"
            >
              <el-table-column
                type="index"
                :index="indexMethod"
                label="序号"
                width="90"
              >
              </el-table-column>
              <el-table-column prop="userName" label="人员名称" width="350">
              </el-table-column>
              <el-table-column prop="regionName" label="归属区域" width="350">
              </el-table-column>
              <el-table-column prop="role.roleName" label="角色" width="350">
              </el-table-column>
              <el-table-column prop="mobile" label="联系电话" width="350">
              </el-table-column>
              <el-table-column prop="name" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button type="text" @click="alter(scope.row.id)"
                    >修改</el-button
                  >
                  <el-button
                    type="text"
                    prop="id"
                    style="color: red"
                    @click="dele(scope.row.id)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- 页数导引 -->
            <PlugIn
              :overa="getlist.totalCount"
              :present="pageIndex"
              :overall="overall"
              @addFn="addFn"
            />
          </div>
        </div>
      </el-main>
    </el-container>
    <ModalBox
      :visible.sync="modelbox"
      ref="addList"
      :ceshi="ceshi"
      :omitlist="getlist.currentPageRecords"
    />
  </div>
</template>

<script>
import { getrole, deleteservice } from '@/api/personnel'
import PlugIn from '../plug-in/index.vue'
import ModalBox from '../plug-in/modalBox.vue'
export default {
  name: 'ListView',
  components: { PlugIn, ModalBox },
  data () {
    return {
      pageIndex: '1', // 页
      pageSize: '10', // 每页渲染条数
      overall: '1', // 得到存在的页数
      getlist: {
        currentPageRecords: [],
        totalCount: '', // 总条数
        totalPage: '' // 页数
      }, // 返回的数据
      inputww: '', // 搜索框的数据
      modelbox: false, // 切换模态框
      ceshi: true, // 切换标题
      omitlist: {} // 储存编辑项
    }
  },
  created () {
    this.getrole() // 渲染页面
  },
  methods: {
    indexMethod (index) {
      // 计算出每页的序号
      return index + 1 + (this.pageSize * this.pageIndex - 10)
    },
    async getrole () {
      // 获取数据，进行表单渲染
      const arr = await getrole(this.pageIndex, this.pageSize)
      // console.log(arr);
      this.getlist = arr
      this.pageIndex = arr.pageIndex
      this.pageSize = arr.pageSize
      this.overall = Math.ceil(arr.totalCount / this.pageSize) + ''
    },
    addFn (sum) {
      // 实现切换页面
      const arr = this.pageIndex * 1 + sum + ''
      if (arr > 0 && arr <= this.overall) {
        this.pageIndex = arr
        this.getrole() // 重新渲染数据
      }
    },
    alter (id) {
      // 编辑
      // console.log('1号',this.getlist.currentPageRecords);
      this.modelbox = true
      this.ceshi = false
      const arr = this.getlist.currentPageRecords.filter(
        (item) => item.id === id
      )
      // this.omitlist = arr[0];
      // this.getlist.currentPageRecords = []
      // console.log('2号',this.getlist.currentPageRecords);
      this.$refs.addList.ruleForm = { ...arr[0] }
    },
    async dele (id) {
      // 删除
      await deleteservice(id)
      this.$message.success('数据删除成功~')
      this.getrole() // 渲染页面
    },
    addFnm () {
      // 添加
      this.$refs.addList.ruleForm = {
        userName: '', // 用户名
        roleId: '', // 角色Id //获取角色列表
        mobile: '', // 手机号
        regionId: '', // 所属区域Id  获取区域列表
        regionName: '', // 所属区域名称
        status: false, // 启用状态
        image: '' // 头像Url
      }// 表单数据
      this.ceshi = true
      this.modelbox = true // 打开模态框
    },
    sousuo () {
      // 实现搜索
      this.getlist.currentPageRecords = this.getlist.currentPageRecords.filter(
        (item) => item.userName === this.inputww
      )
    }
  }
}
</script>

<style lang="scss" scoped>
//  实现表头的scss布局
.el-header {
  height: 64px;
  margin-bottom: 30px;
  background-color: #fff;
  color: rgb(96, 98, 102);
  line-height: 60px;
  .el-input {
    width: 200px;
    height: 36px;
    margin-right: 15px;
    margin-left: 20px;
    .el-input__inner {
      width: 100%;
      height: 36px;
    }
  }
  .el-button {
    font-size: 16px;
    .el-icon-search:before {
      font-size: 16px;
    }
  }
}
//  实现底部表单的scss布局
.el-main {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  color: #333;
  line-height: 30px;
  // button的样式
  .item.el-button {
    font-size: 16px;
    margin-left: 20px;
  }
  .item.el-button--primary {
    background-color: #ff9743;
    border-color: #fff;
  }
  .ry-butt {
    display: flex;
    flex-direction: column;
    .ry-onm {
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .ry-form {
      margin-left: 20px;
      width: 100%;
      .yan {
        font-size: 16px;
      }
    }
  }
}
</style>
